<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />

	</head>
	<!--https://dev.dcloud.net.cn/mui/ui/  官网  可以看到对应的功能
	下边的代码快 有可以提供快捷的方式来生成对应的代码快的地方
	
-->

	<body>
		<!--mhe快捷键 -->
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">登录页面</h1>
		</header>
		<!--mbo 生成主体-->
		<div class="mui-content">
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>用户名</label>
					<input id="username" type="text" class="mui-input-clear" placeholder="请输入用户名" value="张三">
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input id="password" type="password" class="mui-input-password" placeholder="请输入密码">
				</div>
				<div class="mui-button-row">
					<button id="confirm" type="button" class="mui-btn mui-btn-primary">确认</button>
					<button type="button" class="mui-btn mui-btn-danger">取消</button>
				</div>
			</form>
		</div>

	</body>
		<script type="text/javascript" charset="utf-8">
			mui.init();
			//所有的代码需要放到这个里边  
			mui.plusReady(function(){
				console.info("1111");
				var username=document.getElementById("username");
				var password=document.getElementById("password");
			//	alert(username.value); //获取到属性的值
			  
			      //mui的方式来触发事件
				mui(".mui-button-row").on('tap','.mui-btn',function(){
				  // alert("按钮触发了。。。。");
				}) ;
				
				
				//另外一种点击事件触发  js提供
		       var confirm=document.getElementById("confirm");
				confirm.addEventListener("tap",function(){
					//alert("addEventListener  按钮触发.....");
					//mui发送ajax 
					mui.ajax('http://192.168.3.128:8080/login',{
						data:{
							username: username.value,
							password:password.value
						},
						dataType:'json',//服务器返回json格式数据
						type:'post',//HTTP请求类型
						timeout:10000,//超时时间设置为10秒；
						headers:{'Content-Type':'application/json'},	              
						success:function(data){
							//服务器返回响应，根据响应结果，分析是否登录成功；
							 console.info("fanhui："+data);
							 // 使用JSON.stringify可以将JSON对象转换为String字符串
							 var  jsonStr=JSON.stringify(data);
							 console.log(jsonStr);
							 var jsonObj = JSON.parse(jsonStr);
							 console.info("jsonObj:"+jsonObj);
							 if(data.success){
								 //mui.openWindow  是页面的跳转 
								   mui.openWindow({
								     url: 'login_success.html', 
								     id:'login_success.html'    ,//id 唯一  和页面名称一样就行
								   });
								   
								   var user = {
								        username: username.value,
								       password: password.value
								   }
								   // 将对象数据放入到缓存中，需要转换为字符串
								   plus.storage.setItem("user", JSON.stringify(user));
							 }else{
								   mui.openWindow({
								     url: 'login_fail.html', 
								     id:'login_fail.html'
								   });
							 }
						},
						error:function(xhr,type,errorThrown){
							//异常处理；
							console.log(type);
						}
					});
				})
				
				
			});
		</script>
</html>